﻿@page "/components/menu"

<DocsPage>
    <DocsPageHeader Title="Menus" Component="@nameof(MudMenu)">
        <Description>
            Use menus to show items in a scannable way.
            Make menus easy to open, close, and select.
            Menus can open from a variety of components, including icon buttons and text fields.
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic Usage">
            </SectionHeader>
            <SectionContent Code="@nameof(MenuSimpleExample)">
                <MenuSimpleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Dense Menu">
                <Description>
                    Dense menus are more compact than regular menus and open instantly, suitable for desktop platforms.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(MenuDenseExample)">
                <MenuDenseExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Activator">
                <Description>
                    The activator is the element responsible for spawning the menu popover.
                </Description>
            </SectionHeader>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Default Button">
                        <Description>
                            The default menu button provides many of the same options as a standard button.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuCustomizationExample)" ShowCode="false">
                        <MenuCustomizationExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Icon Button">
                        <Description>
                            When the <CodeInline>@nameof(MudMenu.Icon)</CodeInline> property is specified, the activator is rendered as a <CodeInline>MudIconButton</CodeInline> instead.
                            Note: This is not the same as <CodeInline>@nameof(MudMenu.StartIcon)</CodeInline> or <CodeInline>@nameof(MudMenu.EndIcon)</CodeInline> which are used to add icons to the default button activator as seen above.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuIconButtonsExample)" ShowCode="false">
                        <MenuIconButtonsExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Custom Activator">
                        <Description>
                            If the regular customization options are not enough, use the <CodeInline>ActivatorContent</CodeInline> render fragment to define a custom activator element for opening the menu.
                            In this example, a custom button, chip, and avatar are each used to open a menu.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuActivatorExample1)" ShowCode="false">
                        <MenuActivatorExample1 />
                    </SectionContent>
                </DocsPageSection>

            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Menu Content">
            </SectionHeader>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Item Icons">
                        <Description>
                            Use the <CodeInline>Icon</CodeInline> property on a menu item to show an icon and <CodeInline>IconColor</CodeInline> to change its color.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuItemCustomizationExample)" ShowCode="false">
                        <MenuItemCustomizationExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Divider">
                        <Description>
                            You can insert a <CodeInline>MudDivider</CodeInline> between menu items to separate them.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuDividerExample)" ShowCode="false">
                        <MenuDividerExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Max Height">
                        <Description>
                            The menu's height is automatically restricted to the viewport if it gets too large,
                            but if you need it to be a specific number of pixels you can use the <CodeInline>MaxHeight</CodeInline> property.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuMaxHeightExample)" ShowCode="false">
                        <MenuMaxHeightExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Nested Menu (Desktop)">
                <Description>
                    Cascading menus, also known as nested menus, allow users to navigate a wide range of options by presenting menus with multiple levels of hierarchy.
                    Click or hover your mouse over submenus (denoted by an arrow icon) to open them.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(MenuWithNestingExample)" ShowCode="false">
                <MenuWithNestingExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Advanced Usage">
            </SectionHeader>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Two-way Binding">
                        <Description>
                            The <CodeInline>Open</CodeInline> parameter supports two-way binding,
                            allowing you to control the menu's visibility programmatically and synchronize its state with a boolean property.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuTwoWayBindingExample)" ShowCode="false">
                        <MenuTwoWayBindingExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Mouse Events">
                        <Description>
                            Use the <CodeInline>ActivationEvent</CodeInline> property to specify which mouse event opens the menu.
                            If the menu is a nested menu, this property may act differently.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuActivatorExample2)" ShowCode="false">
                        <MenuActivatorExample2 />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Cursor Position">
                        <Description>
                            Enable the <CodeInline>PositionAtCursor</CodeInline> property to open the menu at the cursor's location.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuActivatorOnMouseExample)" ShowCode="false">
                        <MenuActivatorOnMouseExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Context Menu">
                        <Description>
                            The previous example can be extended to create a contextual menu.
                            When <CodeInline>Label</CodeInline>, <CodeInline>Icon</CodeInline>, and <CodeInline>ActivatorContent</CodeInline> are unset, no button is rendered and the menu can only be opened programmatically.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuContextMenuExample)" ShowCode="false">
                        <MenuContextMenuExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Placement">
                        <Description>
                            The component uses <MudLink Href="/components/popover">MudPopover</MudLink> to place its menu. Adjust the
                            <CodeInline>AnchorOrigin</CodeInline> and <CodeInline>TransformOrigin</CodeInline> properties to control the menu's position.
                            For more details and examples, visit the <MudLink Color="Color.Secondary" Href="/components/popover">popover documentation page</MudLink>.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuAdvancedPopoverExample)" ShowCode="false">
                        <MenuAdvancedPopoverExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="Modal vs Non-modal">
                        <Description>
                            By default, the menu is modal, meaning that you cannot interact with other elements while it is open.
                            To allow interactions with other elements, set the <CodeInline>Modal</CodeInline> property to <CodeInline>false</CodeInline>.
                        </Description>
                    </SectionHeader>
                    <SectionContent Code="@nameof(MenuModalExample)" ShowCode="false">
                        <MenuModalExample />
                    </SectionContent>
                </DocsPageSection>

                <DocsPageSection>
                    <SectionHeader Title="DropdownSettings">
                        <Description>
                            This component leverages <MudLink Href="/components/popover">MudPopover</MudLink> along with
                            <MudLink Href="/components/overlay">MudOverlay</MudLink> to manage its item list.
                            You can configure certain aspects using <CodeInline>DropdownSettings</CodeInline>,
                            which sets default appearance and behavior properties.
                            Learn more on the <MudLink Color="Color.Secondary" Href="/components/popover#dropdownsettings">popover documentation page.</MudLink>
                        </Description>
                    </SectionHeader>
                </DocsPageSection>

            </SectionSubGroups>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
